<template>
  <div class="list-container">
    <router-link to="/heroes/add" class="btn btn-primary">添加英雄</router-link>
    <hr />
    <table class="table table-hover" ref="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>英雄名称</th>
          <th>英雄性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.hName}}</td>
          <td>{{item.hGender}}</td>
          <td>{{item.cTime|formatTime}}</td>
          <td>
            <router-link :to="'/heroes/edit/'+item.id" class="btn btn-success">编辑</router-link>&nbsp;
            <button @click="delHeroes(item.id)" class="btn btn-danger">删除</button>
          </td>
        </tr>
        <tr v-if="list.length===0">
          <td colspan="5">暂无数据</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
// 导入axios
// import axios from "axios";
// 导入moment
import moment from 'moment';
export default {
  data() {
    return {
      list: []
    };
  },
  filters: {
    // formatTime 过滤器名字，对应的函数处理格式。
    formatTime (value) {
      // 使用过滤器的时候，管道符 | 前的js表达式执行结果，就是value
      return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  created() {
    console.log(this.$refs.table)
    this.getList();
  },
  mounted () {
    console.log(this.$refs.table)
  },
  methods: {
    // 删除英雄
    delHeroes(id) {
      if (confirm("是否确定删除英雄？")) {
        this.$http.delete(`heroes/${id}`).then(()=>{
          // 删除成功 更新列表
          this.getList()
        }).catch(()=>{
          alert('删除失败')
        })
      }
    },
    // 获取英雄列表数据
    getList() {
      // 通过axios发查询列表请求
      this.$http.get("heroes").then(res => {
        this.list = res.data;
        console.log(this.list);
      });
    }
  }
};
</script>

<style>
</style>